import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Layout, Button, Input, message } from 'tea-component';
import Clipboard from 'clipboard';
import { BaseItem, Bread } from '@src/components/common-compinents';
import * as actionTypes from '@src/model/actionType';
import { getQueryVariable, timeFormatYMDHms } from '@src/utils/index';

const bread = Bread;
const { Content } = Layout;
const { TextArea } = Input;

function getTitle(tp) {
  switch (tp) {
    case 'bk':
      return '区块链浏览器/区块列表/区块详情/交易详情';
    case 'ts':
      return '区块链浏览器/交易列表/交易详情';
    default:
      return '区块链浏览器/交易列表/交易详情';
  }
}

export function TransactionDetail(props) {
  const id = decodeURIComponent(getQueryVariable('id') || '') || 0;
  const tp = getQueryVariable('tp');
  const dispatch = useDispatch();
  const { history } = props;

  // @ts-ignore
  const txDetailStore = useSelector((state) => state.txDetailReducer);

  // const businessData1 = [
  //   { name: '促销价', value: txDetailStore.txDetail.SalePrice },
  //   { name: '规格参数', value: txDetailStore.txDetail.Spec },
  //   { name: '新货/二手货', value: txDetailStore.txDetail.IsNew ? '新货' : '二手货' },
  // ];

  // const businessData2 = [
  //   { name: '合作商家', value: txDetailStore.txDetail.Business },
  //   { name: '生产仓库', value: txDetailStore.txDetail.Producer },
  //   { name: '仓库', value: txDetailStore.txDetail.Warehouse },
  // ];

  // const businessData3 = [
  //   { name: '库存量', value: txDetailStore.txDetail.Storage },
  //   { name: '交货周期', value: txDetailStore.txDetail.Delivery },
  //   { name: '', value: '' },
  // ];

  const baseData = [
    { name: '交易哈希', value: txDetailStore.txDetail.TxHash },
    { name: '交易发送者', value: txDetailStore.txDetail.Sender },
    { name: '交易状态', value: txDetailStore.txDetail.TxStatusCode },
    { name: '创建时间', value: timeFormatYMDHms(txDetailStore.txDetail.Timestamp) },
    { name: '所属区块哈希', value: txDetailStore.txDetail.BlockHash },
    { name: '区块高度', value: txDetailStore.txDetail.BlockHeight },
    { name: '执行合约', value: txDetailStore.txDetail.ContractName },
    { name: '合约版本号', value: txDetailStore.txDetail.ContractVersion },
    { name: '合约调用方法', value: txDetailStore.txDetail.ContractMethod },
    { name: '合约读写集哈希', value: txDetailStore.txDetail.RwSetHash },
    { name: '合约执行结果码', value: txDetailStore.txDetail.ContractResultCode },
  ];

  useEffect(() => {
    dispatch({ type: actionTypes.fetchTxDetail, params: { Id: id } });

    const clipboard = new Clipboard('.txIdCopyBtn');
    clipboard.on('success', function (e) {
      message.success({
        content: '已复制到剪贴板',
      });
      // clipboard.destroy();
    });
  }, [dispatch]);

  return (
    <Content>
      <Content.Header
        showBackButton
        onBackButtonClick={() => {
          history.goBack();
        }}
        title={bread(getTitle(tp))}
      />
      <Content.Body>
        {/* <div
          style={{
            width: '1000px',
            boxSizing: 'border-box',
            margin: '0px auto',
            marginBottom: '10px',
            backgroundColor: '#fff',
            padding: '18px 20px',
            border: '1px solid #DDDDDD',
          }}
        >
          <div
            style={{
              color: '#000000',
              fontSize: '12px',
              fontFamily: 'MicrosoftYaHei-Bold',
            }}
          >
            业务信息
          </div>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <div style={{ flex: 1.2 }}>
              {businessData1.map((item, index) => {
                return <BusinessItem {...item} key={index}></BusinessItem>;
              })}
            </div>
            <div style={{ flex: 1.8 }}>
              {businessData2.map((item, index) => {
                return <BusinessItem {...item} key={index}></BusinessItem>;
              })}
            </div>
            <div style={{ flex: 1 }}>
              {businessData3.map((item, index) => {
                return <BusinessItem {...item} key={index}></BusinessItem>;
              })}
            </div>
          </div>
        </div> */}
        <div
          style={{
            width: '1000px',
            boxSizing: 'border-box',
            margin: '10px auto',
            backgroundColor: '#fff',
            padding: '18px 20px',
            border: '1px solid #DDDDDD',
          }}
        >
          <div
            style={{
              color: '#000000',
              fontSize: '12px',
              fontFamily: 'MicrosoftYaHei-Bold',
            }}
          >
            基本信息
          </div>
          <div
            style={{
              fontSize: '12px',
              fontFamily: 'Microsoft YaHei',
              color: '#888888',
              padding: '12px 0px',
            }}
          >
            <div style={{ display: 'inline-block', width: '105px' }}>交易ID</div>
            <span id="tx-id" style={{ color: '#444444' }}>
              {txDetailStore.txDetail.TxId}
            </span>
            <Button className="txIdCopyBtn" type="link" style={{ marginLeft: '34px' }} data-clipboard-target="#tx-id">
              复制
            </Button>
          </div>
          {baseData.map((item, index) => {
            return <BaseItem key={index} {...item}></BaseItem>;
          })}
          <div
            style={{
              fontSize: '12px',
              fontFamily: 'Microsoft YaHei',
              color: '#888888',
              padding: '12px 0px',
              display: 'flex',
            }}
          >
            <div style={{ width: '105px' }}>合约调用参数</div>
            <TextArea
              style={{
                color: '#444444',
                width: '512px',
                height: '128px',
                overflow: 'auto',
                backgroundColor: '#fff',
              }}
              value={txDetailStore.txDetail.ContractParameters}
              readOnly={true}
            ></TextArea>
          </div>
          <div
            style={{
              fontSize: '12px',
              fontFamily: 'Microsoft YaHei',
              color: '#888888',
              padding: '12px 0px',
              display: 'flex',
            }}
          >
            <div style={{ width: '105px' }}>合约执行结果</div>
            <TextArea
              style={{
                color: '#444444',
                width: '512px',
                height: '128px',
                overflow: 'auto',
                backgroundColor: '#fff',
              }}
              value={txDetailStore.txDetail.ContractResult}
              readOnly={true}
            ></TextArea>
          </div>
        </div>
      </Content.Body>
    </Content>
  );
}
